<template>
  <div>
    <el-page-header @back="goBack" content="确认订单"></el-page-header>
    <el-table :data="productList">
      <el-table-column property="fname" label="名称" width="150"></el-table-column>
      <el-table-column property="fprice" label="价格 /元" width="150"></el-table-column>
      <el-table-column property="fnum" label="库存"></el-table-column>
      <el-table-column property="snum" label="数量"></el-table-column>
      <el-table-column label="图片">
        <template slot-scope="{row}">
          <el-image
              style="width: 50px; height: 50px"
              :src="row.fimg"
              :preview-src-list="srcList">
          </el-image>
        </template>
      </el-table-column>
    </el-table>
    <div class="order-footer">
      <div class="order-price">
        {{totalPrice}} ￥
      </div>
      <el-button  @click="pay" type="danger" round>付款</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderConfirm",
  data(){
    return{
      productList:[],
      count:[],
      srcList:[],
      totalPrice: 0,
      contract:{},
      agency:{}
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    pay(){
      let oId = localStorage.getItem("oId")
      console.log(oId)
      this.$confirm('是否支付?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          method: 'get',
          url: `http://localhost:8081/order/pay/${oId}/${this.agency.aid}`
        }).then(res => {
          if (res.data.code === 0){
            this.$message('支付成功!');
            setInterval(function () {
              location.href = "/orderRecord"
            },1000)
          }else{
            this.$message.error(res.data.data);
          }
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  mounted() {
    let agency = JSON.parse(sessionStorage.getItem("agency"))
    this.agency = agency
    this.productList = JSON.parse(localStorage.getItem("productList"))
    this.productList.forEach(list => {
      this.srcList.push(list.fImg)
      this.totalPrice = this.totalPrice + (parseFloat(list.fprice) * parseFloat(list.snum))
    })
  }
}
</script>

<style scoped>
.container{
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: row;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 10px auto;
}
.order-footer{
  margin-top: 40px;
  text-align: right;
}
.order-price{
  font-size: xx-large;
  color: red;
}
</style>
